require(['./config'], () => {
  require(['template', 'request','jquery','header','footer','nav', 'popper', 'bootstrap'], (template,req) => {
    class NewProduct {
      constructor() {
        this.load()
        this.getForList()
        this.prodImg()
        this.createDom()
        this.createB()
        this.onchange()
      }
      load() {
        console.log($)
      }
      //
      getForList(){
        $.get('http://rap2api.taobao.org/app/mock/271831/index/product',res=>{
         if(res.code === 200){
          //  console.log(res)
          const html = template('newProLists',{dataLists:res.dataList})
          // console.log(html)
          $('#hpl_pro').html(html)
         }
        })
      }
      //加载列表图片
      prodImg(){
        $.post('/fn/sxtensionTheme',res=>{
          const html = template('pi_imgs',{proImg:res})
          $('#pro_imgs').html(html);
        })
      }
      //改变图片
      createDom(){
        const id = window.location.href.split('?');
        const ID = id[id.length-1].split("=")[id.length-1]
        //拿到id
        // console.log(ID);
        $.post('/fn/sxtensionTheme',res=>{
          //根据id 去 渲染页面
          // console.log(res);
          let arrId = []
          let arrImg = []
          let arrName = []
          let arr = {}
          res.map(item=>{
            arrId.push(item.id)
            arrImg.push(item.appimgUrl)
            arrName.push(item.name)
            arr.id = arrId
            arr.img = arrImg
            arr.name = arrName
            return  arr
          })
          // $('.hot_image img').prop('src',arrImg[1]);
          console.log(ID)
          
          switch(ID){
            case '284':
              $('.hot_image img').prop('src',arrImg[0]);
              $('#createB').text(arrName[0]);
              break;
            case '392':
              $('.hot_image img').prop('src',arrImg[1]);
              $('#createB').text(arrName[1]);
              break;
            case '398':
              $('.hot_image img').prop('src',arrImg[2]);
              $('#createB').text(arrName[2]);
              break;
            case '380':
              $('.hot_image img').prop('src',arrImg[3]);
              $('#createB').text(arrName[3]);
              break;
            case '239':
              $('.hot_image img').prop('src',arrImg[4]);
              $('#createB').text(arrName[4]);
              break;
            case '187':
              $('.hot_image img').prop('src',arrImg[5]);
              $('#createB').text(arrName[5]);
              break;
            case '191':
              $('.hot_image img').prop('src',arrImg[6]);
              $('#createB').text(arrName[6]);
              break;
            case '234':
              $('.hot_image img').prop('src',arrImg[7]);
              $('#createB').text(arrName[7]);
              break;
            case '199':
              $('.hot_image img').prop('src',arrImg[8]);
              $('#createB').text(arrName[8]);
              break;
          }
          this.cartNum()
          this.login()
          this.outClick()
          this.searchName()
        })
      }
      //标题
      createB(){
        const a = window.location.href;
        const b =  a.split('=')[1];
        const c = ['新品上市','热销精选','限量收藏','抢先预定','限量推春','特价折扣','FANTHFUL'] 
        const d = a.split('?')[1].split('=')[0];
        if(d==='id'){
          console.log('执行删除')
          $('.hot_image').remove();
          $('#createB').text(c[b]);
        }
      }
      //首页购物车的数量判断
      cartNum() {
        let a = $('.tsc_eee').text()
        const loginT = document.cookie
        const b = loginT.split('=')[1]
        if (b) {
          const userC = JSON.parse(localStorage.getItem('usernameList'))
          //这个是当前用户的信息
          let userCart = ''
          //通过filter 方法拿到当前的用户信息
          userC.filter(item => {
            if (item.username === b) {
              userCart = item
              return userCart
            }
          })
          $('.tsc_eee').text(userCart.cart.length)
        }else{
          $('.tsc_eee').text('0')
        }
      }
       //监听用户登录
       login() {
        const a = document.cookie
        const user = a.split('=')[1]
        const loginBox = $('.tsb_login_box .tlb_to'),
          logOutBox = $('.tsb_login_box .tlb_new')
        if (user) {
          loginBox.css('display', 'none')
          logOutBox.css('display', 'block')
          $('.tlbn_username').text(user);
        } else {
          loginBox.css('display', 'block')
          logOutBox.css('display', 'none')
        }
      }
      //监听用户退出
      outClick() {
        $('.tlbno_out').on('click', function () {
          console.log('tuichu')
          //杀死cookie
          const cookie = document.cookie,
            username = cookie.split('=')[1]

          function setCookie(key, value, options = {
            expires: new Date(),
            path: '/'
          }) {
            document.cookie = `${key}=${encodeURIComponent(value)};expires=${options.expires};path=${options.path}`
          }
          setCookie('username', '', {
            expires: -1,
            path: '/'
          })
          const loginBox = $('.tsb_login_box .tlb_to'),
            logOutBox = $('.tsb_login_box .tlb_new')
          loginBox.css('display', 'block')
          logOutBox.css('display', 'none')
          const loname = $('.tsblb_username'),
            lopwd = $('.tsblb_password')
          loname.val('')
          lopwd.val('')
        })
      
      }
      onchange(){
        req.get_xiong()
        .then(res=>{
          console.log(res)
        })
      }
      searchName(){
        $('.tsb_search_btn').on('click',function(){
          let a = $('.tsb_seachbox_input').val()
          a = encodeURIComponent(a)
          window.location.href = `/html/search.html?name=${a}`
        })
      }
    }
    return new NewProduct()
  })
})